<template>
    <div class="form">
        <div class="process"><img src="@/assets/index/process.png" alt=""></div>
        <div class="formbg">
            <div class="form-top"><img src="@/assets/index/form-top.png" alt=""></div>
            <input type="text" class="username" placeholder="请输入您的姓名" v-model="this.username">
            <input type="text" placeholder="请输入您的电话" v-model="this.phone">
            <div class="submit" @click="sendForm()"><img src="@/assets/index/btn1.png" alt=""></div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

export default {
    name: 'Form',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    methods:{
        sendForm (){
            axios.get(this.baseUrl+'cms/joinAdd',
            {
                params:{
                    username:this.username,
                    phone:this.phone,
                    message:this.message,
                    description:this.description,
                    local:this.local
                }
            })
            .then(this.sendSucc)
        },
        sendSucc(response){
               console.log(response)
               console.log(response.data.errno)
               const errno = response.data.errno
            const h = this.$createElement;
            if(errno===0){

                this.toastSuccess()
               

            }else if(errno===1){
                
                this.toastError()
            }
        },
        toastSuccess() {
                this.$dialog.toast({
                    mes: '报名成功',
                    timeout: 1500,
                    icon: 'success'
                });
            },
            toastError() {
                this.$dialog.toast({
                    mes: '该手机号已报名！',
                    timeout: 1500,
                    icon: 'error',
                    callback: () => {
                        this.$dialog.alert({mes: '请重新填写！'});
                    }
                });
            },


    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
img 
    width 100%
.process 
    width 100%
    margin 0.2rem 0
.formbg 
    background white
    
input 
    height 0.8rem
    width 5.64rem
    display block
    margin 0.05rem auto 
    border 1px solid #999999
    border-radius 0.54rem
    text-indent 0.3rem
.username 
    margin-top 0.3rem
.submit 
    margin 0.05rem auto 
    padding-bottom 0.3rem
    width 5.64rem
</style>
